<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        dt{
            float: left;
        }
    </style>
</head>
<body>
    <div id="app">
        <p v-for="n in 4">{{n}}</p>
        <hr>
        <dl>
            <template v-for="book in books">
                <dt>{{book["name"]}}</dt>
                <dd>{{book["price"]}}</dd>
            </template>
        </dl>
        <hr>

        书名<input type="text" v-model="bookName">
        价格<input type="text" v-model.number="bookPrice">
        <input type="submit" value="提交" v-on:click='clickHandle'>
        <template v-for="book in bookList">
        <ol>
            <li>书名{{book.name}}</li>
            <li>价格{{book.price}}</li>
        </ol>
        </template>
        <hr>
        <ul>
            <li v-for="(value,key) in person">{{key}}{{value}}</li>
        </ul>
        <hr>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            
            data:{
                books:[
                    {name:'三国演义',price:12},
                    {name:'水浒传',price:12},
                    {name:'红楼梦',price:12},
                ],
                person:{
                    name:'kk',
                    age:12,
                    gender:'famale'
                },
                bookList:[],
                bookName:'kk',
                bookPrice:0,
            },
            methods:{
                clickHandle(){
                    var book = {}
                    book.name = this.bookName
                    book.price = this.bookPrice
                    // this.bookList.push(book)
                    this.bookList = this.bookList.concat([book])
                }
            }
        })
    </script>
</body>
</html>